Hi，今天我們來實作自動暫存之機制，當表單的輸入項目很多時，其實會有暫存的需求，甚至極端狀況下，若是出現瀏覽器當掉重開的狀況，如果有類似像word的機制，重開後可以接續再重打資料的話，用起來會比較安心，今天我們會使用到vue.js 的 watch 和 localStorage，來進行我流版暫存功能

作業原理

其實作業原理很簡單，

1. 使用watch 監看 bind 的物件是否有改動，改動的話將新的資料放到 localStorage 中。
2. 頁面啟動時，在setup 區塊檢查 localStorage 有沒有暫存資料，有的話就將資料取出使用。
3. 存檔 api 執行成功後，刪除暫存資料。

程式碼

    const { createApp, onBeforeMount, reactive } = Vue
    let data = reactive({ casedesc: "", caseinfo: "",  inErr: false})
    createApp({
        setup() {
            //啟動時，檢查 localStorage 有無 tmpdata
            let tmpstr = localStorage.getItem("tmpdata")
            if(tmpstr) {
                //因 tmpdata 只能存文字資料，故進行文字轉 json，轉換完畢後，指派給 data 的各項屬性
                let tmpdata = JSON.parse(tmpstr)
                //不可以直接將 tmpdata 指派給 data
                data.caseinfo = tmpdata.caseinfo
                data.casedesc = tmpdata.casedesc
            }
            return { data }
        },
        watch: {
            data: {
                //監看深層屬性
                deep: true,
                handler: function(oldval, newval) {
                    let tmpdata = {
                        casedesc: newval.casedesc,
                        caseinfo: newval.caseinfo
                    }
                    //localStorage 只可以放文字，所以物件要轉成文字存入
                    localStorage.setItem("tmpdata", JSON.stringify(tmpdata))
                }
            }
        },
        methods: {
            readfile(e) {
                let file = e.target.files[0]
                let reader = new FileReader()
                if(file) {
                    reader.onload = function(e) {
                        data.fileinfo = reader.result;
                    }
                    reader.readAsDataURL(file)
                }
            },
            senddata() {
                if(data.casedesc === "" || data.caseinfo === "") {
                    alert("請務必輸入問題描述與說明")
                    data.inErr = true
                    return false
                }
                axios.post("/saf/mgr/api/saveCase", {
                    casedesc: data.casedesc,
                    caseinfo: data.caseinfo,
                    fileinfo: data.fileinfo
                }).then(function (response) {
                    let rt = response.data
                    if (rt.status == "00") {
                        //存檔成功能，刪除暫存資料
                        localStorage.delItem("tmpdata")
                        alert("存檔成功")
                    }
                }).catch(function (response) {
                    alert(response.response.data)
                })
            }
        }
    })
    .mount('#app')

說明：
執行原理如同上方之說明，但是有幾點需要注意

1. 若監看對象為物件，需要設定 deep = true，不然會無效
2. 也可以一個屬性一個屬性監看，寫法如下

    watch: {
        "data.casedesc": function(oldval, newval) {
            //....
        }

3. 除非手動刪除，不然 localStorage 的資料會一直存在，使用時請注意
4. 如同上方程式碼的說明，由 localStorage 抓到的 tmpdata ，不可以直接指派給 data，亦即不可以寫 data = tmpdata，雖然畫面上會顯示 localStorage 抓出的數字，但是 watch 會失效